<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM5-创建和删除元素</title>
    <style>
        table{
            width: 400px;
            border-collapse: collapse;
        }
        td,th{
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        let data = [
            {
                name:'吴亦凡',
                age:30
            },
            {
                name:'鹿晗',
                age:30
            },
            {
                name:'王俊凯',
                age:20
            },
        ]
        //创建表格标签
        let table = document.createElement("table")
        //创建行标签
        let tr1 = document.createElement("tr")
        //创建th标签
        let th1 = document.createElement("th")
        th1.innerHTML = "姓名"
        let th2 = document.createElement("th")
        th2.innerHTML = "年龄"
        let th3 = document.createElement("th")
        th3.innerHTML = "操作"
        tr1.appendChild(th1)
        tr1.appendChild(th2)
        tr1.appendChild(th3)
        //将行添加到表格中
        table.appendChild(tr1)
        
        data.forEach(function(item){
            let tr2 = document.createElement("tr")
            let td1 = document.createElement("td")
            td1.innerHTML = item.name
            let td2 = document.createElement("td")
            td2.innerHTML = item.age
            let td3 = document.createElement("td")
            td3.innerHTML = '删除'

            //给第三个td注册一个点击事件（on表示当，click表示点击）
            //当点击时，执行一个方法
            td3.onclick = function(){
                if(confirm('确定删除吗？')){
                    //删除元素有两种方式：
                    //1.自删
                    // this 是td，td的父级是tr，tr自删
                    // this.parentNode.remove()
                    // tr2.remove()   //tr2就是当前行

                    //2.通过父级删除子级
                    table.removeChild(tr2)
                }
            }

            tr2.appendChild(td1)
            tr2.appendChild(td2)
            tr2.appendChild(td3)
            table.appendChild(tr2)
        })

        //将表格添加到body中
        document.body.appendChild(table)
    </script>
</body>
</html>